"use client"

import { Button, TextArea, TextFieldInput } from "@radix-ui/themes";
import dynamic from "next/dynamic";
import * as Form from "@radix-ui/react-form";
import { FormEvent, useCallback, useState } from "react";
import { EditorState, convertToRaw } from "draft-js";
import UiButton from "./ui/UiButton";
import EditTags from "./EditTags";
const RichEditor = dynamic(() => import("@/components/editor/RichEditor"), { ssr: false })

export type OnFinishData = { title: FormDataEntryValue, subTitle: FormDataEntryValue, context: string }
export type EditContextPropsOnFinish = (data: OnFinishData) => any
export interface EditContextProps {
    onFinish: EditContextPropsOnFinish
}
const EditContext = ({
    onFinish
}: EditContextProps) => {
    const [loading, setLoading] = useState(false);
    const [editorState, setEditorState] = useState<EditorState>();
    const [subTitle, setSubTitle] = useState("");
    const getContextText = useCallback(() => {
        const arr = editorState?.getCurrentContent().getBlocksAsArray();
        let text = [];
        for (let i = 0; !!arr && i < arr.length && text.length < 200; i++) {
            text.push(arr[i].getText());
        }
        return text.join("。").slice(0, 100);
    }, [editorState]);
    const onChangeSubTitle = useCallback(({ target: { value } }: any) => {
        setSubTitle(value)
    }, [])
    const onSubmit = useCallback(async (event: FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        const { title, subTitle } = Object.fromEntries(new FormData(event.currentTarget));
        if (!editorState) return;
        setLoading(true)
        const context = JSON.stringify(convertToRaw(editorState.getCurrentContent()))
        await onFinish({ title, subTitle, context })
        setLoading(false)
    }, [editorState, onFinish]);
    return (
        <Form.Root
            onSubmit={onSubmit}
        >
            <Form.Field name="title">
                <Form.Label>标题</Form.Label>
                <Form.Control asChild>
                    <TextFieldInput placeholder="title" />
                </Form.Control>
            </Form.Field>
            <Form.Field name="context">
                <RichEditor onChange={setEditorState} />
            </Form.Field>
            <Form.Field name="subTitle">
                <Form.Label>副标题</Form.Label>
                <Form.Control
                    value={!!subTitle ? subTitle : getContextText()}
                    onChange={onChangeSubTitle}
                    asChild
                >
                    <TextArea />
                </Form.Control>
            </Form.Field>
            {/* <Form.Field defaultValue={["name"]} name="tags">
                <Form.Label>标签</Form.Label>
                <Form.Control asChild>
                    <EditTags />
                </Form.Control>
            </Form.Field> */}
            <div className="h-2"></div>
            <UiButton loading={loading}>
                提交
            </UiButton>
        </Form.Root>
    )
}
export default EditContext